<template>
  <view class="user-container">
    <navbar title="账号绑定"></navbar>
    <view class="group">
      <view class="row-container" @click="toPhone">
        <text class="label">手机号</text>
        <text :class="['sub-label',mine.phone?'':'blue']">{{ mine.phone || '点击绑定' }}</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <!--  #ifdef APP-PLUS-->
      <view class="divider"></view>
      <view class="row-container" @click="toThirdLogin('weixin')">
        <text class="label">微信登录</text>
        <text :class="['sub-label',mine.wxUnionId?'':'blue']">{{ mine.wxUnionId ? '已绑定' : '点击绑定' }}</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <!--    #endif-->
      <!--    #ifdef APP-PLUS-->
      <view v-if="hasApple" class="divider"></view>
      <view v-if="hasApple" class="row-container m-b-30" @click="toThirdLogin('apple')">
        <text class="label">苹果登录</text>
        <text :class="['sub-label',mine.appleOpenId?'':'blue']">{{ mine.appleOpenId ? '已绑定' : '点击绑定' }}</text>
        <image src="../../static/black_back.png" class="arrow"></image>
      </view>
      <!--    #endif-->
    </view>
    <BindPhoneDialog ref="BindPhoneDialog"></BindPhoneDialog>
    <CheckBindMergeDialog ref="CheckBindMergeDialog"></CheckBindMergeDialog>
  </view>
</template>

<script>
import {
  mapActions,
  mapGetters
} from 'vuex'
import {commonApi} from '@/api'
import navbar from '@/components/navbar'
import BindPhoneDialog from "@/components/BindPhoneDialog.vue";
import CheckBindMergeDialog from "@/components/CheckBindMergeDialog.vue";

export default {
  components: {
    CheckBindMergeDialog,
    BindPhoneDialog,
    navbar
  },
  data() {
    return {
      hasApple: false,
    }
  },
  created() {
    if(this.platform === 'ios'){
      this.hasApple = true
    }
  },
  computed: {
    ...mapGetters(['mine','platform'])
  },
  methods: {
    ...mapActions(['refreshUser']),

    toBack() {
      uni.navigateBack()
    },
    toPhone() {
      this.$refs.BindPhoneDialog.open('bind')
    },
    toThirdLogin(provider) {
      uni.login({
        provider,
        success: async (res2) => {
          try {
            uni.showLoading({
              title: '加载中...',
            })
            let authResult = res2.authResult;
            if (provider === 'apple'){
              authResult = res2.appleInfo;
            }
            const res = await commonApi.checkBound(provider, authResult)
            console.log('xxxxxxxxxx', provider, authResult, res.data.data)
            if (res.data.data) {
              uni.hideLoading()

              await this.$refs.CheckBindMergeDialog.open('wx')
              uni.showLoading({
                title: '加载中...',
              })
              await commonApi.bindMerge(provider, authResult)
              await this.$refs.CheckBindMergeDialog.close()
              uni.hideLoading()
            } else {
              await commonApi.bindMerge(provider, authResult)
            }
            uni.showToast({
              title: '绑定成功！',
              icon: 'none',
              duration: 2000
            });
            await this.refreshUser()
          } catch (e) {
            if (e && e.data && e.data.msg) {
              uni.showToast({
                title: e.data.msg,
                icon: 'none',
                duration: 2000
              });
            }
          }
          uni.hideLoading()
        }
      })
    }
  }
}
</script>
<style lang="scss">
page {
  background-color: #f8f8f8;
}

.user-container {
  display: flex;
  flex-direction: column;
}
</style>
